<template>
  <PrimaryContainer>
    <form class="primary-form">
      <InteractiveBlock>
        <PrimaryArea id="url" v-model="input" :label="$t('common.text_input').toString()" placeholder="Input..."
                     :rows="10" copyable></PrimaryArea>
      </InteractiveBlock>
      <InteractiveBlock class="flex items-center justify-between">
        <div class="space-x-1">
          <UniButton @click="output = ceasarCipher.encode(input, 13)">{{
              $t('common.btn_encode')
            }}
          </UniButton>
        </div>
        <UniButton @click="swap" icon="tabler:arrows-up-down">{{ $t('common.btn_swap') }}</UniButton>
        <UniButton danger @click="input = ''; output = '';" icon="tabler:trash">{{
            $t('common.btn_clean')
          }}
        </UniButton>
      </InteractiveBlock>
      <InteractiveBlock>
        <PrimaryArea id="result" v-model="output" :label="$t('common.text_output').toString()" placeholder="Output..."
                     :rows="10" copyable></PrimaryArea>
      </InteractiveBlock>
    </form>
    <PrimaryIntroduction title="ROT-13" path="intro/rot13" :references="references"/>
  </PrimaryContainer>
</template>

<script>
import PrimaryContainer from "~/components/tool/PrimaryContainer";
import PrimaryIntroduction from "~/components/tool/PrimaryIntroduction";
import InteractiveBlock from "~/components/tool/InteractiveBlock";
import PrimaryArea from "~/components/form/PrimaryTextArea";

import ceasarCipher from '~/libs/ceasarCipher';

export default {
  name: "rot-series",
  components: {PrimaryArea, InteractiveBlock, PrimaryIntroduction, PrimaryContainer},
  head() {
    return {
      title: this.$t("tool.rotSeries.title") + " - " + this.$t("app.name"),
      meta: [
        {hid: "description", name: "description", content: this.$t("tool.rotSeries.desc")},
      ],
    };
  },
  data() {
    return {
      input: '',
      output: '',
      ceasarCipher: ceasarCipher,
      references: [
        {
          name: 'Wikipedia: ROT13',
          url: 'https://zh.wikipedia.org/wiki/ROT13'
        }
      ],
    }
  },
  methods: {
    swap() {
      [this.input, this.output] = [this.output, this.input];
    }
  }
}
</script>

<style scoped>

</style>
